<template>
  <div className="app-container">
    <basic-container>
      <div style="width: 100%; height: 300px" ref="chartRef"></div>
    </basic-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {

  },
  created() {

  },
  mounted() {
    this.demoChart();
  },
  methods: {
    demoMe() {
      // https://echarts.apache.org/examples/zh/index.html
    },
    demoChart() {
      let myChart = echarts.init(this.$refs.chartRef);
      // 绘制图表
      var option;
      var xAxisData = [];
      var data1 = [];
      var data2 = [];
      for (var i = 0; i < 100; i++) {
        xAxisData.push("A" + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      }
      option = {
        title: {
          text: "标题字段",
        },
        legend: {
          data: ["bar1", "bar2"],
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ["stack"],
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2,
            },
          },
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false,
          },
        },
        yAxis: {},
        series: [
          {
            name: "bar1",
            type: "bar",
            data: data1,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10;
            },
          },
          {
            name: "bar2",
            type: "bar",
            data: data2,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            },
          },
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      };
      myChart.setOption(option);
    },
  },

}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

